<!--
 * @Author: @yzcheng
 * @Date: 2021-04-01 09:14:34
 * @Version: 1.0
 * @LastEditors: whereamazinghappen 306702547@qq.com
 * @Description: 
 * @LastEditTime: 2023-09-23 16:47:47
-->
<template>
  <div :class="$style.aside">
    <el-menu
      active-text-color="rgb(12, 138, 255)"
      :class="$style.menu"
      :default-active="$route.path"
      :uniqueOpened="true"
      :collapse="isCollapse"
      router
    >
      <layout-aside-item v-for="item in menu" :key="item.path" :item="item" />
    </el-menu>
    <div :class="$style['btn-collapse-container']">
      <i
        @click="isCollapse = !isCollapse"
        :class="[
          isCollapse ? 'el-icon-s-fold down_icon' : 'el-icon-s-unfold down_icon',
          $style['btn-collapse'],
        ]"
      ></i>
    </div>
  </div>
</template>

<script>
import navData from "@/i18n/nav.json";
import LayoutAsideItem from "./LayoutAsideItem";
import { USE_REMOTE_ROUTE_TABLE } from "@/utils/routes";
import { getRoutes } from "@/api/global";
import { dyncRoutes } from "@/utils/routes";

export default {
  data() {
    return {
      isCollapse: false,
      menu: [],
      res: [],
    };
  },
  components: {
    LayoutAsideItem,
  },
  methods: {
    setCollapse() {
      this.isCollapse = false;
    },
  },
  async mounted() {
    if (USE_REMOTE_ROUTE_TABLE) {
      this.res = await getRoutes({ method: "get" });
      const rst = this.res.data.data.filter((item) => {
        return item.path === "base-data/basedata";
      });
      this.menu = dyncRoutes(rst[0].children || []);
    } else {
      this.menu = navData["zh-cn"];
      this.menu = this.menu[1].children[6].children;
      console.log(" this.menu", this.menu);
    }
  },
};
</script>

<style lang="scss" module>
.aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 0;
  .menu {
    flex: 1;
    max-height: calc(100vh - 110px);
    overflow: hidden;
  }
}
.down_icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
}
.btn-collapse-container {
  height: 50px;
  .btn-collapse {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 20px;
  }
}
</style>
<style lang="scss">
.examinePStatus-1 {
  //考核计划状态
  color: #909399;
}
.examinePStatus-2 {
  color: #e6a23c;
}
.examinePStatus-3 {
  color: #67c23a;
}
.examinePStatus-4 {
  color: #f56c6c;
}
.examinePStatus-5 {
  color: #409eff;
}
.examinePStatus-6 {
  color: #303133;
}
.examine-dialog-content {
  padding: 20px;
}
</style>
